<template>
  <div class="content-box">
    <div class="tab-box flex ac">
      <div
        @click="tabActive = item.id"
        :class="tabActive == item.id ? 'tab-items-active' : ''"
        v-for="item in tabList"
        :key="item.id"
        class="tab-items flex ac jc"
      >
        {{ `${item.name} ${item.num}` }}
      </div>
    </div>
    <div class="padding-box">
      <div class="search-box">
        <el-form
          :inline="true"
          :model="searchFormInline"
          class="demo-form-inline"
        >
          <el-form-item label="">
            <el-input
              v-model="searchFormInline.user"
              placeholder="请输入设备二维码"
              clearable
            />
          </el-form-item>
          <el-form-item label="">
            <el-input
              v-model="searchFormInline.user"
              placeholder="请输入店铺名称"
              clearable
            />
          </el-form-item>
          <el-form-item label="">
            <el-select
              v-model="searchFormInline.value"
              placeholder="请选择状态"
              size="large"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="">
            <el-select
              v-model="searchFormInline.value"
              placeholder="请选择设备归属"
              size="large"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button class="search-btn" type="primary" @click="">
              查询
            </el-button>
            <el-button class="data-btn" :icon="Document">数据导出</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="table-box">
        <el-table
          :data="tableData"
          stripe
          height="100%"
          :header-cell-style="{
            color: '#828A9D',
            textAlign: 'center',
            height:'60px'
          }"
          :cell-style="{ textAlign: 'center', color: '#1B2431' }"
        >
          <el-table-column fixed prop="date" label="设备型号">
            <template #default="scope">
              <div class="device-num flex ac jc">
                <span class="tips-box"></span>
                7E39576684C24E0B
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="设备二维码" />
          <el-table-column prop="state" label="店铺名称" />
          <el-table-column prop="city" label="设备归属" />
          <el-table-column prop="address" label="最后心跳时间" />
          <el-table-column prop="zip" label="总收益" />
          <el-table-column prop="zip" label="操作">
            <template #default="scope">
              <el-button type="primary" link @click="dialogVisible = true">
                详情
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination-box flex jc">
        <el-pagination
          v-model:page-size="searchForm.pageSize"
          v-model:current-page="searchForm.page"
          :total="searchForm.totalAll"
          @change="sizePageChangeFunc"
          background
          layout="total,sizes,prev, pager, next,jumper"
        />
      </div>
    </div>
  </div>
  <!-- 详情 -->
  <el-dialog v-model="dialogVisible" class="dialog-device-box">
    <template #header>
      <div class="title-box">设备详情</div>
    </template>
    <el-tabs v-model="tabActiveName" type="card">
      <el-tab-pane label="电池信息" name="1">
        <div class="device-battery-msg-box">
          <div class="battery-msg-box flex fw">
            <div
              class="battery-msg-items flex fc ac jc"
              v-for="(item, index) in 8"
              :key="index"
            >
              <span class="desc">SN：77236</span>
              <span class="desc">孔位：1</span>
              <span class="desc">电量：100%</span>
              <div class="battery-btn-box flex ac jc">
                <el-button class="battery-btn" plain round>锁住</el-button>
                <el-button class="battery-btn" plain round>弹出</el-button>
              </div>
            </div>
          </div>
          <div class="battery-state-box flex ac jb">
            <p class="battery-state-box-title">状态：</p>
            <div class="battery-state-box-contnet flex ac jb">
              <div class="battery-state-box-contnet-items">
                <span class="battery-state-box-contnet-items-tips"></span>
                无电池
              </div>
              <div class="battery-state-box-contnet-items">
                <span class="battery-state-box-contnet-items-tips blue"></span>
                正常
              </div>
              <div class="battery-state-box-contnet-items">
                <span
                  class="battery-state-box-contnet-items-tips yellow"
                ></span>
                电量低
              </div>
              <div class="battery-state-box-contnet-items">
                <span class="battery-state-box-contnet-items-tips red"></span>
                异常
              </div>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="收益信息" name="2">
        <div class="profit-msg-box flex fw">
          <div class="profit-msg-box-items flex">
            <span class="profit-msg-box-items-title">可借：</span>
            <div class="profit-msg-box-items-desc">1</div>
          </div>
          <div class="profit-msg-box-items flex">
            <span class="profit-msg-box-items-title">可还：</span>
            <div class="profit-msg-box-items-desc">7</div>
          </div>
          <div class="profit-msg-box-items flex">
            <span class="profit-msg-box-items-title">日收：</span>
            <div class="profit-msg-box-items-desc">34元</div>
          </div>
          <div class="profit-msg-box-items flex">
            <span class="profit-msg-box-items-title">月收：</span>
            <div class="profit-msg-box-items-desc">34元</div>
          </div>
          <div class="profit-msg-box-items flex">
            <span class="profit-msg-box-items-title">总收：</span>
            <div class="profit-msg-box-items-desc">34元</div>
          </div>
          <div class="profit-msg-box-items flex">
            <span class="profit-msg-box-items-title">备注：</span>
            <div class="profit-msg-box-items-desc">34元</div>
          </div>
          <div class="profit-msg-box-items flex profit-msg-box-items100">
            <span class="profit-msg-box-items-title">详细位置：</span>
            <div class="profit-msg-box-items-desc">福建省厦门市思明区明腾广场3楼(上藤地铁站C东南口步行480米)前台</div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
    <template #footer v-if="tabActiveName == 1">
      <div class="dialog-footer">
        <el-button class="dialog-footer-btn1" type="primary">
          远程重启
        </el-button>
        <el-button class="dialog-footer-btn2" type="primary">
          刷新电池信息
        </el-button>
        <el-button class="dialog-footer-btn3">解绑</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import { onMounted, reactive, toRefs, ref } from 'vue'
import { Document } from '@element-plus/icons-vue'
onMounted(() => {
  console.log('index')
})
let dialogVisible = ref(false)
let tabActiveName = ref('1')
let options = ref([
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  },
  {
    value: 'Option3',
    label: 'Option3',
  },
  {
    value: 'Option4',
    label: 'Option4',
  },
  {
    value: 'Option5',
    label: 'Option5',
  },
])
let searchForm = ref({
  pageSize: 10,
  page: 1,
  totalAll: 0,
})
const sizePageChangeFunc = e => {
  console.log(searchForm.value)
}
let tableData = ref([
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
])
const shortcuts = [
  {
    text: '最近一周',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      return [start, end]
    },
  },
  {
    text: '最近一个月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      return [start, end]
    },
  },
  {
    text: '最近三个月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
      return [start, end]
    },
  },
]
let searchFormInline = ref({})
let tabActive = ref(1)
let tabList = ref([
  {
    name: '在线',
    num: 3,
    id: 1,
  },
  {
    name: '离线',
    num: 213,
    id: 2,
  },
  {
    name: '离线预警',
    num: 433,
    id: 3,
  },
  {
    name: '满电池',
    num: 354,
    id: 4,
  },
])
</script>
<style scoped lang="scss">
@import './index.scss';
</style>
<style lang="scss">
@import './dialog.scss';
</style>